<template>
  <main-layout>
    <div class="category">
      <!-- 头部导航 444-->
      <van-tabs sticky>
        <van-tab v-for="index in 8" :key="index" :title="'分类 ' + index">
        </van-tab>
      </van-tabs>
      <!-- 子分类 -->
      <van-grid :column-num="4" class="subclassing">
        <van-grid-item
          v-for="value in 7"
          :key="value"
          icon="point-gift"
          text="文字"
          @click="onClickList"
        />
        <router-link to="/allCategory" class="subclassing-all"
          >全部分类</router-link
        >
      </van-grid>

      <!-- 热门推荐 -->
      <div class="hot-nav">
        <span class="hot-nav-left">热门推荐</span>
        <span class="hot-nav-right">更多>>></span>
      </div>
      <van-grid :column-num="2" class="hot" square>
        <van-grid-item
          v-for="value in 8"
          :key="value"
          icon="point-gift"
          text="文字"
        />
      </van-grid>
      <!-- 相关专题 -->
      <div class="related">
        <h3>相关专题</h3>
      </div>
      <van-grid :column-num="1">
        <van-grid-item
          v-for="value in 5"
          :key="value"
          icon="point-gift"
          text="文字"
        />
      </van-grid>
    </div>
  </main-layout>
</template>

<script>
// import { getCategories } from '@/api/category'
export default {
  name: 'Category',
  methods: {
    onClickList () {
      this.$router.push('/categorylist')
    }
  }

}
</script>

<style lang="less" scoped>
.category {
  background: #f9f9f9;
  .hot-nav {
    margin: 20px;
    .hot-nav-left {
      font-size: 16px;
    }
    .hot-nav-right {
      float: right;
      color: rgb(161, 157, 157);
    }
  }
  .hot {
    margin-top: 30px;
  }
  .related {
    text-align: center;
    h3 {
      font-weight: 500;
      color: rgb(161, 157, 157);
    }
  }
  .subclassing {
    position: relative;
    .subclassing-all {
      position: absolute;
      top: 116px;
      right: 16px;
      color: rgb(95, 94, 94);
    }
  }
}
</style>
